<template>
	<!-- 分类 -->
	<view class="content">
		<!-- 头部 -->
		<view class="content_top">
			<text class="content_top_left">分类</text>
			<view class="content_top_content" @click="classifysearch">
				<icon  size="28rpx" class="content_top_contenticon" type="search"></icon>
				<text class="content_top_contenttext">部分商品 第2件0元</text>
			</view>
			<view class="content_top_content_right">
				<image mode="widthFix" class="content_top_content_rightimg" src="http://localhost:3000/img/news.png"></image>
				<text class="content_top_content_righttext">消息</text>
			</view>
		</view>
		<!-- 分类导航 列表-->
		<view class="classifys_content">
			<!-- 列表区域 -->
			<view class="classifys_contentbox">
				<scroll-view scroll-y style="height: 100%;">
					<view class="classifys_content_left">
						<view class="classifys_content_left_box"></view>
						<!-- <view @click="types(1)" :class="{activeclassifys:type_id==1}" class="classifys_content_left_box">
							<text :class="{activeclassifysbor:type_id==1}" class="classifys_content_left_list">新品上架</text>
						</view> -->
						<view v-for="(item,index) of goods_one" :key="index" @click="types(item.cat_id)" :class="{activeclassifys:type_id==item.cat_id}" class="classifys_content_left_box">
							<text :class="{activeclassifysbor:type_id==item.cat_id}" class="classifys_content_left_list">{{item.cat_name}}</text>
						</view>
						<view style="padding:0;margin:0;height: 90rpx;"></view>
					</view>
				</scroll-view>
				
			</view>
			<!-- 商品列表区域 -->
			<view class="classifys_right">
				<view v-for="(item,index) of goods_three" :key="index" class="classifys_right_box">
					<text class="classifys_rightbox_title">{{goods_two[index].cat_name}}</text>
					<view class="classifys_rightbox_list">
						<view v-for="(item2,index2) of item" :key="index2" class="classifys_rightbox_listbox" @click="searchlist(item2.cat_name)">
							<image mode="widthFix" class="classifys_rightbox_listimg" src="http://localhost:3000/images/list33.png"></image>
							<text class="classifys_rightbox_listtext">{{item2.cat_name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 默认显示的商品类型
				type_id:1,
				// 一级分类
				goods_one:[],
				// 二级分类
				goods_two:[],
				// 三级分类
				goods_three:[]
			}
		},
		// 监听页面加载,其参数是上个页面传递的值
		onLoad() {
			this.getgoodsone()
			
		},
		// 监听页面显示，每次都触发
		onShow() {
			this.getstorages()
		},
		methods:{
			// 获取一级商品分类
			getgoodsone(){
				uni.request({
					url:"http://localhost:3001/goods_one",
					method:"GET",
					success: (res) => {
						this.goods_one=res.data.data
						this.getgoodstwo()
						// console.log(this.goods_one)
					}
				})
			},
			// 获取二级商品分类
			getgoodstwo(){
				uni.request({
					url:"http://localhost:3001/goods_two",
					data:{
						two:this.type_id
					},
					method:"GET",
					success: (res) => {
						this.goods_two=res.data.data
						this.getgoodsthree()
						// console.log(res)
					}
				})
			},
			// 获取三级商品分类
			getgoodsthree(){
				var arr=[]
				this.goods_two.forEach(item=>{
					uni.request({
						url:"http://localhost:3001/goods_three",
						data:{
							three:item.cat_id
						},
						method:"GET",
						success: (res) => {
							arr.push(res.data.data)
						}
					})
					// console.log("aa",this.goods_three)
				})
				this.goods_three=arr
				// console.log(this.goods_three)
				
			},
			// 获取本地存储中的商品类型 type_id
			getstorages(){
				uni.getStorage({
					key:"type_id",
					success:res=>{
						this.type_id=res.data
						this.getgoodstwo()
						// 接收成功之后,删除type_id
						uni.removeStorage({
							key:"type_id"
						})
					}
				})
			},
			// 点击商品类型,切换对应的商品
			types(typeid){
				this.type_id=typeid
				this.getgoodstwo()
			},
			// 点击头部搜索框,进入搜索界面
			classifysearch(){
				uni.navigateTo({
					url:"../search/search"
				})
			},
			// 点击分类商品列表,进入商品列表页面
			searchlist(title){
				// console.log(title)
				uni.navigateTo({
					url:"../search/search?query="+title
				})
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
		background-color: #f3f3f3;
	}
	.content{
		width: 750rpx;
		height: 100%;
		background-color: #f3f3f3;
	}
	.content_top{
		width: 100%;
		height: 64rpx;
		/* background-image: url(../../static/img/sub1.png);
		background-size: 100%; */
		background: #eb2836;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9999;
	}
	.content_top_left{
		font-size: 28;
		color: #fff;
		margin: 0 20rpx;
	}
	.content_top_leftimg{
		width: 100%;
		vertical-align: middle;
	}
	.content_top_content{
		flex:1;
		display: flex;
		padding: 12rpx 0;
		align-items: center;
		font-size: 24rpx;
		color: #888888;
		background-color: #fff;
		border-radius: 10rpx;
	},
	.content_top_contenticon{
		margin: 0 14rpx;
	}
	.content_top_content_right{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		font-size: 26rpx;
		color: #cdb8b7;
		margin: 0 10rpx;
	}
	.content_top_content_rightimg{
		width:32rpx;
		vertical-align: middle;
	}
	.classifys_content{
		margin-top: 84rpx;
		width: 100%;
		display: flex;
		
	}
	.classifys_contentbox{
		width: 180rpx;
		height: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
		position: fixed;
		left: 0;
		top:84rpx;
		bottom:0;
	}
	.classifys_content_left{
		display: flex;
		width: 100%;
		flex-direction: column;
		background-color:#fff ;
		border-radius:0 0 10rpx 10rpx;
	}
	.classifys_content_left_box{
		padding: 34rpx 10rpx;
		background-color: #fff;
	}
	.classifys_content_left_list{
		font-size: 18rpx;
		color: #000000;
		display: block;
		text-align: center;
	}
	.activeclassifys{
		background-color: #f3f3f3;
	}
	.activeclassifysbor{
		color: #ea2a37;
		border-left: 6rpx solid #ea2a37;
	}
	.classifys_right{
		flex:1;
		margin-left: 180rpx;
		padding: 10rpx 18rpx;
	}
	.classifys_right_box{
		margin-top: 20rpx;
	}
	.classifys_rightbox_title{
		font-size: 16rpx;
		color: #000000;
		margin: 20rpx 10rpx;
	}
	.classifys_rightbox_list{
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		flex-shrink: 0;
		align-content: space-between;
		
	}
	.classifys_rightbox_listbox{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20rpx 0;
		width: 33%;
	}
	.classifys_rightbox_listimg{
		width: 100rpx;
	}
	.classifys_rightbox_listtext{
		font-size: 16rpx;
		margin-top: 14rpx;
	}
	
	
	
</style>
